<template>
  <el-dialog append-to-body
             :close-on-click-modal="false"
             title="扫码联机"
             :visible.sync="syncVisible"
             width="500px"
             @close="doCancel"
             @open="doOpen"
             v-el-drag-dialog>
    <div class="p-3 pb-1"
         v-loading="loading">
      <el-alert class="mb-2"
                effect="dark"
                show-icon
                title="使用外呼APP扫描下方二维码联机"
                type="warning"></el-alert>
      <el-alert class="mb-2"
                effect="dark"
                show-icon
                title="若您还没有安装我们的外呼APP，那么请先安装我们的APP"
                type="warning"></el-alert>
      <div class="float-end my-2 border rounded-1 border-box d-flex align-items-center justify-content-center p-1 text-center cursor-point"
           style="width:70px;height:70px;line-height:1.2;"
           @click.stop="doCommand('downloadApk')">
        点我<br />下载APP
      </div>
      <div class="border p-2 rounded-1 mx-auto my-3"
           style="width:256px;height:256px;">
        <img class="w-100 h-100"
             :src="linkQrCode" />
      </div>
    </div>
    <template #footer>
      <div class="text-center">
        <el-button :disabled="loading"
                   type="primary"
                   @click.stop="doCancel">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  import DialogMixins from "@/mixins/DialogMixins";
  import { Component, Mixins } from "@some21/vue-class-decorator";
  import { getLinkServerQrCode } from "@/framework/app-client-host";

  @Component({
    name: "DialogModifyPwd",
  })
  export default class extends Mixins(DialogMixins) {
    doCancel() {
      this.syncVisible = false;
    }
    linkQrCode = "";
    async doOpen() {
      this.loading = true;
      const data = await getLinkServerQrCode();
      this.linkQrCode = URL.createObjectURL(data);
      this.loading = false;
    }

    doCommand(command) {
      switch (command) {
        case "downloadApk": {
          window.open(process.env.VUE_APP_APKURL);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
